<template>
<f7-app :params="f7params" >

  <!-- Left panel with cover effect-->
  <f7-panel left cover theme-dark>
    <f7-view>
      <f7-page>
        <f7-navbar title="Left Panel"></f7-navbar>
        <f7-block>Left panel content goes here</f7-block>
      </f7-page>
    </f7-view>
  </f7-panel>


  <!-- Right panel with reveal effect-->
  <f7-panel right reveal theme-dark>
    <f7-view>
      <f7-page>
        <f7-navbar title="Right Panel"></f7-navbar>
        <f7-block>Right panel content goes here</f7-block>
      </f7-page>
    </f7-view>
  </f7-panel>


  <!-- Views/Tabs container -->
  <f7-view class="safe-areas" main url="/">


  </f7-view>


  <!-- Popup -->
  <f7-login-screen :opened="!isLogined">
    <f7-view url="/login/" name="register">

    </f7-view>
  </f7-login-screen>


  <f7-actions :opened="langActions" @actions:closed="$store.commit('toggleLangActions', false)">
    <f7-actions-group>
      <f7-actions-label>{{$t('m.s5')}}</f7-actions-label>
      <f7-actions-button @click="toggleLanguage('zh')">{{$t('m.zh')}}</f7-actions-button>
      <f7-actions-button @click="toggleLanguage('en')">{{$t('m.en')}}</f7-actions-button>
    </f7-actions-group>
    <f7-actions-group>
      <f7-actions-button color="red">{{$t('m.cancel')}}</f7-actions-button>
    </f7-actions-group>
  </f7-actions>

</f7-app>
</template>
<script>

  import routes from '../js/routes.js';
  import { getUrlVars } from "../utils/utils";

  export default {
    data() {
      return {
        // Framework7 Parameters
        f7params: {
          name: 'mWallet', // App name
          theme: 'ios', // Automatic theme detection
          // App root data
          data: function () {
            return {

            };
          },

          // App routes
          routes: routes,
          view: {
            stackPages: true,  //缓存页面
            iosSwipeBack:true,
            iosDynamicNavbar: false,  //禁用ios动态导航栏~
            pushState: true,
            // pushStateRoot: '/',
            pushStateOnLoad: false,
          },
          touch: {
            disableContextMenu: false,
          },
          dialog: {
            // set default title for all dialog shortcuts
            // change default "OK" button text
            buttonOk: '确定',
            buttonCancel: '取消',
          }
        },
        // Login screen data
        username: '',
        password: ''
      }
    },
    computed: {
      isLogined() {
        return this.$store.getters.token;
      },
      langActions() {
        return this.$store.state.languageActions
      }
    },
    methods: {
      toggleLanguage(lang) {
        console.log(this.$i18n);
        this.$i18n.locale = lang;
        this.$store.dispatch('setLanguage', lang);
      }
    },
    mounted() {
      this.$store.dispatch('GetConfig');
      if (this.isLogined) {
        this.$store.dispatch('GetInfo');

        this.$store.dispatch('GetCurrencyInfo');
        this.$store.commit('setCache');
      }
      this.$f7ready((f7) => {
        // location.hash = '';
        // Call F7 APIs here
        let a = getUrlVars()['invit_code'];
        if(a) {
          this.$f7.views.register.router.navigate('/register/?invite_code='+a);
        }
      });
    }
  }
</script>
